<template>
  <div class="demo">
    <div class="demo-title">响应式</div>
    <div class="demo-content">
      <Table :columns="columns" :row-key="(record) => record.key" :data-source="data">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>{{ record.name }}</a>
          </template>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Table from '@sscd/table';
  const columns: any = [
    {
      title: 'Name (all screens)',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age (medium screen or bigger)',
      dataIndex: 'age',
      key: 'age',
      responsive: ['md'],
    },
    {
      title: 'Address (large screen or bigger)',
      dataIndex: 'address',
      key: 'address',
      responsive: ['lg'],
    },
  ];
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
  ];
</script>
